<template>
  <!-- elementui抽屉组件中的关闭销毁元素会出现歌词不显示bug，暂时未知其原因，所以暂不加上destroyed-on-close -->
  <el-drawer :visible.sync="visible" :with-header="false" direction="btt" :modal="false" style="position: absolute" size="100%">
    <div id="MusicDetailCard">
      <div class="musicdetail" v-if="data">
        <!-- 关闭图标 -->
        <div class="icon"><i title="收起音乐详情页" class="el-icon-arrow-down" @click="$emit('closeDialog')"></i></div>
        <!-- 布局 -->
        <div class="container">
          <!-- 左侧旋转唱片 -->
          <div class="left">
            <img class="needle" :class="{ needleRotate: isPlay }" src="@/assets/img/needle.png" alt="" />
            <div class="circle" :class="{ pause: !isPlay }">
              <img class="record" src="@/assets/img/disc.png" alt="" />
              <img class="avtar" v-lazy="data.al.picUrl" alt="" />
            </div>
          </div>
          <!-- 中间歌曲信息 -->
          <div class="center">
            <p class="name">{{ data.name }}</p>
            <p class="artist">{{ data.al.name }} - {{ data.ar[0].name }}</p>
            <!-- 歌词 -->
            <Lyric :lyric="lyric"></Lyric>
          </div>
          <!-- 右侧相似音乐 -->
          <div class="right">
            <h5>喜欢这首歌的人也听</h5>
            <div class="simiSongs" v-for="(item, index) in simiSongs" :key="index" @click="getSongsId(item.id)">
              <img v-lazy="item.album.picUrl" alt="" />
              <span class="name">{{ item.name }} - {{ item.artists[0].name }}</span>
            </div>
          </div>
        </div>

        <!-- 评论 -->.
        <div class="comment">
          <h5>全部评论({{ comment.total }})</h5>
          <Comment v-show="!show" :comment="comment" :pageData="pageData" :id="songsId" :type="0" @refresh="getComment" ref="comment"></Comment>
          <div class="loading" v-show="show"><i class="el-icon-loading"></i>加载中...</div>
        </div>
        <!-- 发表评论 -->
        <div class="postComment common" :class="[scrollTop > 100 ? 'appearComment' : '']" @click="postClick">
          <span>发表我的音乐评论</span>
        </div>
        <!-- 回到顶部 -->
        <!-- <div class="BackTop common" :class="[scrollTop > 100 ? 'appearComment' : '']" @click="backTop">
          <i class="el-icon-top"></i>
        </div> -->
        <!-- 弹窗 -->
        <el-dialog title="评论" width="25%" :modal="false" :visible.sync="dialogVisible" destroy-on-close @close="textarea = ''" :close-on-click-modal="false">
          <el-input type="textarea" :placeholder="placeholder" :rows="5" v-model="textarea" maxlength="140" show-word-limit resize="none"></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmClick" size="mini">发 布</el-button>
          </span>
        </el-dialog>
      </div>

      <!-- 当无音乐时展示 -->
      <!-- 关闭图标 -->
      <div class="null" v-else>
        <div class="icon"><i class="el-icon-arrow-down" @click="$emit('closeDialog')"></i></div>
        <el-empty class="empty" description="暂无播放音乐"></el-empty>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import Lyric from '@/components/lyric/Lyric';
import Comment from '@/components/comment/Comment.vue';

export default {
  props: ['data', 'visible'],
  data() {
    return {
      show: false,
      lyric: [],
      simiSongs: [],
      comment: '',
      //页码配置
      pageData: {
        total: 0,
        currentPage: 1,
        pageSize: 20,
      },
      page: 1, //当前请求页码
      scrollTop: 0,
      dialogVisible: false,
      placeholder: '请输入内容',
      textarea: '', //评论内容
      t: 1, //发送或回复
      commentId: '', //回复的评论id
    };
  },
  provide() {
    return {
      currentChange: this.currentChange,
      replyClick: this.replyClick,
    };
  },
  computed: {
    ...mapGetters(['isPlay', 'isLogin', 'songsId']),
  },
  components: {
    Lyric,
    Comment,
  },
  methods: {
    ...mapMutations(['getSongsId']),
    //请求歌词
    async getLyric() {
      const res = await this.$request('/lyric', { id: this.songsId });
      //处理歌词
      //去除\n
      let arr = res.lrc.lyric.split('\n');
      let time = '';
      let value = '';
      let result = [];
      //拆分数组
      arr.forEach((item) => {
        time = item.split(']')[0];
        value = item.split(']')[1];
        //time是一个字符串
        var t = time.slice(1).split(':');
        //去除空行并将结果压入数组,
        result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
      });
      //结果存储
      this.lyric = result;
    },
    //请求相似音乐
    async getSimiSongs() {
      const res = await this.$request('/simi/song', { id: this.songsId });
      this.simiSongs = res.songs;
    },
    //请求评论
    async getComment() {
      const res = await this.$request('/comment/music', { id: this.songsId, offset: (this.page - 1) * 20, timestamp: Date.now() });
      this.comment = res;
      this.pageData.total = res.total;
    },
    //页码改变请求数据
    currentChange(page) {
      this.page = page;
      this.getComment();
    },
    //发布按钮点击
    confirmClick() {
      if (!this.textarea) return this.$message('不能发表空白评论');
      //重置评论页数
      this.page = 1;
      this.pageData.currentPage = 1;
      //发送评论
      let data = {
        t: this.t,
        type: 0,
        id: this.songsId,
        content: this.textarea,
        commentId: this.commentId,
      };
      this.$refs.comment.postComment(data);
      this.dialogVisible = false;
    },
    //评论点击
    postClick() {
      if (!this.isLogin) return this.$message.error('需要登录');
      this.placeholder = '请输入内容';
      this.dialogVisible = true;
    },
    //回复评论点击
    replyClick(cid, name) {
      this.dialogVisible = true;
      this.placeholder = `回复${name}:`;
      this.t = 2;
      this.commentId = cid;
    },
    //监听滚动事件
    handleScroll(e) {
      this.scrollTop = e.target.scrollTop;
    },
    //回到顶部
    backTop() {},
  },
  watch: {
    //监听歌曲改变请求数据
    songsId() {
      //音乐卡片未打开时，不去请求数据，提升性能
      if (!this.visible) return;
      this.getSimiSongs();
      this.getLyric();
      //评论通过v-show实现加载效果
      this.show = true;
      setTimeout(() => {
        this.getComment();
        this.show = false;
      }, 1000);
    },
    //监听音乐卡片打开请求相关数据
    visible(show) {
      if (show) {
        if (!this.songsId) return;
        //卡片打开监听滚动事件
        window.addEventListener('scroll', this.handleScroll, true);
        this.getSimiSongs();
        this.getLyric();
        this.getComment();
      } else {
        //卡片关闭移除监听事件
        window.removeEventListener('scroll', this.handleScroll, true);
      }
    },
  },
};
</script>

<style scoped lang='scss'>
#MusicDetailCard {
  .musicdetail {
    // azure
    background-color: #fff;
    .container {
      display: flex;
      > div {
        width: 33.33%;
      }
      .left {
        position: relative;
        text-align: center;
        .needle {
          width: 120px;
          height: 60px;
          position: absolute;
          top: 60px;
          left: 43%;
          transition: all 1s;
          /* 指定从顶点中间位置开始旋转 */
          transform-origin: 0 0;
          z-index: 3000;
        }
        .needleRotate {
          transform: rotate(25deg);
        }
        .circle {
          margin-top: 120px;
          /* linear,平均速度旋转，infinite：不限次数旋转 */
          animation: desc 20s linear infinite;
          animation-delay: 0.8s;
        }
        @keyframes desc {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        .pause {
          animation-play-state: paused;
        }
        .record {
          width: 230px;
          height: 230px;
        }
        .avtar {
          @include image(160px, 50%);
          position: absolute;
          top: 35px;
          left: 26%;
        }
      }
      .center {
        text-align: center;
        .name {
          font-size: 27px;
          @include hidWord;
        }
        .artist {
          font-size: 14px;
          color: #919191;
          @include hidWord;
        }
      }
      .right {
        padding: 100px 0 0 50px;
        .simiSongs {
          cursor: pointer;
          @include hidWord;
          &:hover {
            background-color: $grayHover;
          }
          img {
            @include image(27px, 5px);
            vertical-align: middle;
            margin: 5px;
          }
          .name {
            font-size: 12px;
            color: #474444;
          }
        }
      }
    }
    .comment {
      width: 500px;
      margin: 0 auto;
      h5 {
        margin: 0;
      }
      .loading {
        text-align: center;
        font-size: 13px;
        color: #303133;
      }
    }

    .common {
      display: none;
      z-index: 1000;
      width: 120px;
      font-size: 13px;
      text-align: center;
      position: fixed;
      bottom: 200px;
      padding: 5px;
      border-radius: 25px;
      left: 46%;
      transition: all 1s;
      background-color: rgba(193, 189, 189, 0.585);
      cursor: pointer;
      &:hover {
        background-color: rgba(159, 158, 158, 0.605);
      }
    }
    .BackTop {
      width: 30px;
      height: 30px;
      font-size: 20px;
      left: 67%;
      padding: 3px;
    }
    .appearComment {
      display: block;
    }
  }

  .null {
    .empty {
      margin-top: 100px;
    }
  }
}
//common
.el-icon-arrow-down {
  font-size: 20px;
  margin: 20px;
  cursor: pointer;
}
</style>